<template>
  <div class="cardComponent">
    <div class="list" @click="useClick(dataMsg)">
      <div class="list-box">
        <div class="l-top">
          <img class="l-top-icon" v-if="dataMsg.avatar" :src="uploadFileGet(dataMsg.avatar)" />
          <div v-else class="l-top-icon" :style="`color:${colorData};background: ${bgData};`">
            <span>{{ (dataMsg.name || '')[0] }}</span>
          </div>
          <div class="l-top-right">
            <div class="l-top-title">{{ dataMsg.name }}</div>
            <div class="l-top-tags">
              <span
                v-for="(item, index) in extTags"
                :key="item"
                :style="`color: ${tags[index % tags.length].color}; background: ${
                  tags[index % tags.length].background
                }`"
                class="tagsSpan"
              >
                {{ item }}
              </span>
            </div>
          </div>
        </div>
        <div class="l-desc">{{ dataMsg.description }}</div>
        <div class="handle">
          <div class="item">
            <img :src="see" alt="" />
            <span>{{ dataMsg.visitNum }}</span>
          </div>
          <div class="line"></div>
          <div class="item" @click.stop="collected">
            <img v-if="!isCollect" :src="collection" alt="" />
            <img v-else :src="collectioned" alt="" />
            <span>{{ dataMsg.collectNum }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, toRefs } from 'vue';
import { useRouter } from 'vue-router';
import collection from '@/assets/ai/collection.svg';
import collectioned from '@/assets/ai/collectioned.svg';
import see from '@/assets/ai/see.svg';
import { saveStorage } from '@/utils';
import { botCollectDel, botCollectPost } from '@/services/bot';
import { ElMessage } from 'element-plus';
import { uploadFileGet } from '@/services/file';

const router = useRouter();

const props = defineProps({
  dataMsg: {
    type: Object,
    default: () => ({}),
  },
  colorData: {
    type: String,
    default: '',
  },
  bgData: {
    type: String,
    default: '',
  },
  isCollect: {
    type: Boolean,
    default: false,
  },
});

const tags = ref<any>([
  { color: 'rgba(67, 60, 254, 1)', background: 'rgba(67, 60, 254, 0.05)' },
  { color: 'rgba(255, 133, 0, 1)', background: 'rgba(255, 133, 0, 0.05)' },
  { color: 'rgba(106, 106, 106, 1)', background: 'rgba(249, 249, 249, 1)' },
]);

const { dataMsg, colorData, bgData, isCollect }: any = toRefs(props);

const extTags = computed(() => {
  const exts = JSON.parse(dataMsg.value['ext'] || '{}');
  if (exts.tags) {
    return exts.tags;
  }
  return [];
});

const useClick = async (val: any) => {
  saveStorage('botId', val.id);
  router.push({ path: '/AIExamPage', query: { id: val.id, flag: val.flag || '' } });
  // router.push({ path: '/copilotinfo', query: { id: val.id, flag: val.flag || '' } });
};

// 收藏
const emits = defineEmits(['collect']);
let timer: any = null;
const collected = async () => {
  const now = new Date().getTime();
  if (timer && now - timer < 3000) {
    ElMessage({
      message: '别点嫩快!!!',
      grouping: true,
      type: 'warning',
    });
    return;
  }
  timer = now;

  const botId = dataMsg.value.id;
  // 删除还是关注
  if (isCollect.value) {
    // 删除
    console.log('删除关注');
    await botCollectDel({ botId });
  } else {
    // 添加
    console.log('添加关注');
    await botCollectPost({ botId });
  }
  emits('collect');
};
</script>

<style lang="scss" scoped>
@use './index.scss';
</style>
